<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <div th:replace="header::common_resource"></div>
</head>
<body>
<div class="demoTable layui-form layui-row" style="margin-top: 7px">
    交易状态：
    <div class="layui-inline">
        <select name="status" id="sel_status">
            <option value="">全部状态</option>
            <option value="1">未付款</option>
            <option value="2">待发货</option>
            <option value="3">待收货</option>
            <option value="4">交易完成</option>
            <option value="0">用户取消</option>
        </select>
    </div>
    用户删除状态：
    <div class="layui-inline">
        <select name="deleted" id="sel_deleted">
            <option value="">全部删除状态</option>
            <option value="0">已删除</option>
            <option value="1">未删除</option>
        </select>
    </div>
    <button class="layui-btn" data-type="reload">查询</button>
</div>

<table class="layui-hide" id="test" lay-filter="test"></table>


<script type="text/html" id="barDemo">
    {{#     if(d.deleted!=1) {            }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">彻底删除</a>
    {{#     }                          }}
    {{#     if(d.status==2 ) {            }}
    <a class="layui-btn layui-btn-xs layui-btn-xs" lay-event="sendOut">确认发货</a>
    {{#     }                          }}
    {{#     if(d.status==2 || d.status==3 || d.status==4 ) {            }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="cancel">取消交易</a>
    {{#     }                          }}
</script>


<script type="text/html" id="deletedTemplet">
    {{#     if(d.deleted==1) {            }}
    <span class="layui-badge layui-bg-blue" style="position: relative; ">未删除</span>
    {{#     } else{     }}
    <span class="layui-badge layui-bg-orange" style="position: relative; ">已删除</span>
    {{#     }                          }}
</script>
<script type="text/html" id="addressTemplet">
 {{d.province+d.city+d.area+d.detail}}
    {{d.provinces==null?'':d.provinces}}{{d.area==null?'':d.area}}{{d.detail==null?'':d.detail}}
</script>
<script type="text/html" id="statusTemplet">
    {{#     if(d.status==1) {            }}
                未付款
    {{#     } else if(d.status==2){     }}
                待发货
    {{#     }else if(d.status==3){         }}
                待收货
    {{#     }else if(d.status==4){         }}
                交易完成
    {{#     }else if(d.status==0){        }}
                交易取消
    {{#     }                  }}
</script>

<script th:inline="javascript">
    layui.use('table', function(){
        var table = layui.table;
        var form = layui.form;

        table.render({
            elem: '#test'
            ,url:[[${#request.getContextPath()}]]+'/order/selectByPage'
            ,defaultToolbar: ['filter', 'exports', 'print']
            ,title: '订单数据表'
            ,cols: [
                [
                    {field:'orderNo', title:'ID', fixed: 'left'}
                    ,{field:'name', title:'收货人',width: 100}
                    ,{field:'address', title:'收货地址',templet: '#addressTemplet'}
                    ,{field:'phone', title:'手机号',width: 150}
                    ,{field:'payment', title:'金额/元',width: 120}
                    ,{field:'status', title:'交易状态',width: 100,templet: '#statusTemplet'}
                    ,{field:'deleted', title:'用户删除',width: 100,templet: '#deletedTemplet'}
                    ,{field:'gmtCreate', title:'创建时间',templet: "<div>{{layui.util.toDateString(d.gmtCreate, 'yyyy-MM-dd HH:mm:ss')}}</div>"}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
                ]
            ]
            ,page: true
            ,id: 'tableId'
        });


        //监听行工具事件
        table.on('tool(test)', function(obj){
            //{id: 2, name: 'zhansgan', password: '23', age: 0, gender: null}
            var data = obj.data;
            console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.post(
                        [[${#request.getContextPath()}]]+'/order/deleteById',
                        {'id': data.orderNo},
                        function(result) {
                            if (result.code == 0) {
                                mylayer.okMsg(result.msg);
                                //删除之后重新刷新这个表格
                                table.reload('tableId');
                            }else {
                                mylayer.errorMsg(result.msg)
                            }
                        },
                        'json'
                    );
                });
            } else if(obj.event === 'sendOut'){
                layer.confirm('确定发货？', function(index){
                    $.post(
                        [[${#request.getContextPath()}]]+'/order/update',
                        {'orderNo': data.orderNo,'status':3},
                        function(result) {
                            if (result.code == 0) {
                                mylayer.okMsg(result.msg);
                                //删除之后重新刷新这个表格
                                table.reload('tableId');
                            }else {
                                mylayer.errorMsg(result.msg)
                            }
                        },
                        'json'
                    );
                });
            }else if(obj.event==='cancel'){
                layer.confirm('确定取消交易？', function(index){
                    $.post(
                        [[${#request.getContextPath()}]]+'/order/update',
                        {'orderNo': data.orderNo,'status':0},
                        function(result) {
                            if (result.code == 0) {
                                mylayer.okMsg(result.msg);
                                //删除之后重新刷新这个表格
                                table.reload('tableId');
                            }else {
                                mylayer.errorMsg(result.msg)
                            }
                        },
                        'json'
                    );
                });
            }
        });

        var $ = layui.$, active = {
            reload: function(){
                //执行重载
                table.reload('tableId', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        status: $('#sel_status').val(),
                        deleted: $('#sel_deleted').val()
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


    });
</script>
</body>
</html>